<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Интерфейс пользователя</title>
    <style>
        #header {
            background-color:black;
            color:white;
            text-align:center;
            padding:5px;
        }
        #content {
            float:left;
            padding:10px; 
        }
    </style>
</head>

<body>
    <div id="header">
        <h1>Интерфейс пользователя</h1>
    </div>


    <div id="content">
        <p>Рабочая область среды <span style="color:red">RIDE</span> состоит из <span style="color:green">меню</span>, <span style="color:green">панели инструментов</span>, <span style="color:green">редактора кода</span>,  <span style="color:green">отладчика</span>, <span style="color:green">редактора пульта</span>, <span style="color:green">блока настроек</span>.</p>
        <p><img src="images/ide_zones.png" alt="Общий вид"></p>
        <p>В панели инструментов размещены иконки наиболее часто используемых команд. При наведении курсора мыши на иконку появляется всплывающая подсказка, описывающая назначение данной команды.</p>
        <p>Отладчик, пульт и настройки могут отображаться или нет по желанию пользователя. По умолчанию они выводятся в правой части окна в виде вкладок. При необходимости их можно вынести в отдельное окно. Для 
        этого нужно зацепиться и потянуть левой кнопкой мыши за заголовок вкладки (в верхней части). В дальнейшем это окно можно снова "прикрепить" к главному окну  двойным щелчком мыши по заголовку.
        Настройка видимости отладчика, пульта и настроек задаётся через панель инструментов или через меню.
        </p>
    </div>
</body>
</html>